<template>
  <view class="strategy-box">
    <view class="top-line"></view>
    <img
      class="strategy-img"
      :src="detailData.coverImageUrl"
      mode="aspectFill"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      @longpress="onLongPress"
    />
    <view class="source-img">
      <img
        :style="{
          width: detailData.fixedIconWidth + 'rpx',
          height: detailData.fixedIconHeight + 'rpx',
        }"
        :src="detailData.fixedIcon"
      />
    </view>
    <view class="str-title sticky">
      <view class="top-line" v-if="!hiddenLine"></view>
      {{ detailData.articleTitle }}
    </view>
    <view class="str-tag-box">
      <view
        class="tag-box-item"
        v-for="(item, index) in detailData.poiList"
        :key="index"
      >
        <img
          class="tag-icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/str-tag-icon.png"
          alt=""
          srcset=""
        />
        <view class="tag-txt">{{ item.poiName }}</view>
      </view>
    </view>
    <slot class="str-title-2" name="center"></slot>
    <!-- <view class="str-title-2">{{ detailData.summary }}</view> -->
    <view class="str-summarize" @click="openDetail(detailData)"
      :data-spmCntSuffix="'.summarize1.openDetail@'"
      :data-custom="1"
      :data-spm="{}">
      <img
        class="str-title-icon"
        src="../../../../static/ai/icon/str-tag-icon-2.png"
        alt=""
        srcset=""
      />
      <view class="summarize-box">
        <view class="summarize-txt">
          <rich-text :nodes="detailData.summary"></rich-text
        ></view>
      </view>
    </view>

    <block v-if="aboutList.length > 0">
      <view class="str-title">文中提及</view>
      <block>
        <view class="str-tag-box">
          <view
            class="tag-box-item-2"
            :class="{ active: index == tabIndex }"
            v-for="(item, index) in aboutList"
            :key="index"
            @click="tabClick(index)"
            :data-spmCntSuffix="'.tagBoxItem@1.tabClick@'"
            :data-custom="index"
            :data-spm="item"
          >
            {{ item.title }}
          </view>
        </view>
        <view>
          <block v-if="aboutList[tabIndex].type == 1">
            <view
              class="summarize-list-box"
              v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
              :key="poiIndex"
              @click="gotoHotelDetails(poiItem)"
              :data-spmCntSuffix="'.tagBoxItem@1.gotoHotelDetails@'"
              :data-custom="poiIndex"
              :data-spm="poiItem"
            >
              <block>
                <view class="box-info">
                  <img
                    class="info-img"
                    :src="poiItem.mainPictureUrl"
                    mode="aspectFill"
                  />
                  <view class="info-content">
                    <view class="content-title">{{ poiItem.productName }}</view>
                    <view
                      class="content-flex active"
                      v-if="
                        poiItem.hotelLevel ||
                        poiItem.hotelType ||
                        poiItem.hotelOpenTime
                      "
                    >
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/hotel-icon-1.png"
                        mode="aspectFill"
                      />
                      <view style="flex: 1">
                        <text>{{ poiItem.hotelLevel }}</text>
                        <text style="padding: 0 10rpx" v-if="poiItem.hotelType"
                          >|</text
                        >
                        <text>{{ poiItem.hotelType }}</text>
                        <text
                          style="padding: 0 10rpx"
                          v-if="poiItem.hotelOpenTime"
                          >|</text
                        >
                        <text>{{ poiItem.hotelOpenTime }}</text>
                      </view>
                    </view>
                    <view class="content-flex active" v-if="poiItem.salePrice">
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/price.png"
                        mode="aspectFill"
                      /><view style="flex: 1"
                        >{{ poiItem.currencyCode
                        }}{{ poiItem.salePrice }}起</view
                      >
                    </view>
                    <view class="content-flex" v-if="poiItem.address">
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
                        mode="aspectFill"
                      /><view style="flex: 1">{{ poiItem.address }}</view>
                    </view>
                    <view class="left-item like">
                      <view class="mark-box" v-if="poiItem.poiScore">
                        <view style="display: flex; flex-wrap: wrap; flex: 1">
                          <block
                            v-for="(star, sindex) in Math.floor(
                              poiItem.poiScore
                            )"
                            :key="sindex"
                          >
                            <img
                              class="star-icon"
                              src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/star_selected.png"
                              alt=""
                              srcset=""
                            />
                          </block>
                          <img
                            class="star-icon"
                            v-if="!isInteger(poiItem.poiScore)"
                            src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/star_select_half.png"
                          />
                        </view>
                        <view style="padding-left: 10rpx; width: 100rpx"
                          >{{ poiItem.poiScore }}分</view
                        >
                      </view>
                      <view class="evaluate" v-if="poiItem.poiCommentCnt"
                        >{{ poiItem.poiCommentCnt }}人推荐</view
                      >
                    </view>
                  </view>
                </view>
                <view class="introduce" v-if="poiItem.recReason"
                  >👍🏻推荐理由: {{ poiItem.recReason }}
                </view>
              </block>
            </view>
          </block>
          <block v-if="aboutList[tabIndex].type == 2">
            <view
              class="summarize-list-box"
              v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
              :key="poiIndex"
              @click="getRestaurantDetail(poiItem)"
              :data-spmCntSuffix="'.summarizeBox@1.getRestaurantDetail@'"
              :data-custom="poiIndex"
              :data-spm="poiItem"
            >
              <view class="box-info">
                <img
                  class="info-img"
                  :src="poiItem.coverImageUrl"
                  mode="aspectFill"
                />
                <view class="info-content">
                  <view class="content-title">{{ poiItem.poiTitle }}</view>

                  <view
                    class="content-flex active"
                    v-if="poiItem.dishStyleList.length > 0"
                  >
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-7-19/tag.png"
                      mode="aspectFill"
                    />
                    <view style="flex: 1">
                      <text
                        v-for="(dishItem, dishIndex) in poiItem.dishStyleList"
                        :key="'dish' + dishIndex"
                      >
                        {{ dishItem }}
                        <text
                          style="padding: 0 10rpx"
                          v-if="dishIndex != poiItem.dishStyleList.length - 1"
                          >|</text
                        >
                      </text>
                    </view>
                  </view>
                  <view class="content-flex" v-if="poiItem.avgPrice">
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/price.png"
                      mode="aspectFill"
                    /><view style="flex: 1">{{ poiItem.avgPrice }}</view>
                  </view>
                  <view class="content-flex" v-if="poiItem.address">
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
                      mode="aspectFill"
                    /><view style="flex: 1">{{ poiItem.address }}</view>
                  </view>
                  <!-- <view class="content-flex active" v-if="poiItem.salePrice">
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/yudin.png"
                      mode="aspectFill"
                    />
                    <view style="flex: 1"
                      >门票
                      <text class="content-txt-1">{{
                        poiItem.currencyCode
                      }}</text
                      ><text class="content-txt-2">{{ poiItem.salePrice }}</text
                      ><text class="content-txt-3">起</text>
                    </view>
                  </view> -->
                </view>
              </view>
              <view class="introduce" v-if="poiItem.recReason"
                >👍🏻推荐理由: {{ poiItem.recReason }}
              </view>
            </view>
          </block>
          <block v-if="aboutList[tabIndex].type == 3">
            <view
              class="summarize-list-box"
              v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
              :key="poiIndex"
              @click="poiDetail(poiItem)"
              :data-spmCntSuffix="'.summarizeBox@1.poiDetail@'"
              :data-custom="poiIndex"
              :data-spm="poiItem"
            >
              <view class="box-info">
                <img
                  class="info-img"
                  :src="poiItem.coverImageUrl"
                  mode="aspectFill"
                />
                <view class="info-content">
                  <view class="content-title">{{ poiItem.poiTitle }}</view>
                  <view class="content-flex">
                    <view
                      v-for="(tagItem, tagIndex) in poiItem.tagList"
                      :key="tagIndex"
                      class="content-tag"
                      >{{ tagItem }}</view
                    >
                  </view>
                  <view class="content-flex active" v-if="poiItem.businessHours">
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/open_time.png"
                      mode="aspectFill"
                    />
                    <view style="flex: 1">{{ poiItem.businessHours }}</view>
                  </view>
                  <view class="content-flex" v-if="poiItem.address">
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
                      mode="aspectFill"
                    /><view style="flex: 1">{{ poiItem.address }}</view>
                  </view>
                  <view class="content-flex active" v-if="poiItem.salePrice">
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/yudin.png"
                      mode="aspectFill"
                    />
                    <view style="flex: 1"
                      >门票
                      <text class="content-txt-1">{{
                        poiItem.currencyCode
                      }}</text
                      ><text class="content-txt-2">{{ poiItem.salePrice }}</text
                      ><text class="content-txt-3">起</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="introduce" v-if="poiItem.recReason"
                >👍🏻推荐理由: {{ poiItem.recReason }}
              </view>
            </view>
          </block>

          <block v-if="aboutList[tabIndex].type == 4">
            <view
              class="summarize-list-box"
              v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
              :key="poiIndex"
              @click="getMarketDetail(poiItem)"
              :data-spmCntSuffix="'.summarizeBox@1.getMarketDetail@'"
              :data-custom="poiIndex"
              :data-spm="poiItem"
            >
              <view class="box-info">
                <img
                  class="info-img"
                  :src="poiItem.coverImageUrl"
                  mode="aspectFill"
                />
                <view class="info-content">
                  <view class="content-title">{{ poiItem.poiTitle }}</view>
                  <view class="content-flex">
                    <view
                      v-for="(tagItem, tagIndex) in poiItem.tagList"
                      :key="tagIndex"
                      class="content-tag"
                      >{{ tagItem }}</view
                    >
                  </view>
                  <view class="introduction omit4">{{
                    poiItem.introduction
                  }}</view>
                </view>
              </view>
              <view class="introduce" v-if="poiItem.recReason"
                >👍🏻推荐理由: {{ poiItem.recReason }}
              </view>
            </view>
          </block>
        </view>
      </block>
    </block>
    <!-- <view style="width: 100%; height: 220rpx"></view> -->
    <!-- 酒店详情 废弃通过调转 -->
    <!-- <hqsPopup
      ref="hotelPopup"
      :height="'100vh'"
      :showHeader="false"
      :showBack="false"
      :showClose="false"
      @onChange="handleAllPop"
    >
      <hotelInfo
        ref="hotelDetails"
        @popupClose="popupClose"
        @open="open"
        :params="detailPrams"
        :showPadding="true"
      ></hotelInfo>
    </hqsPopup> -->
    <!-- 美食详情 -->
    <hqsPopup
      v-model="showRestauran"
      :height="'80vh'"
      :round="20"
      :showClose="false"
      :showHeader="false"
      @onChange="handleAllPop"
    >
      <RestaurantDetails
        ref="restaurantDetails"
        :round="20"
        :overview="restauranData"
      ></RestaurantDetails>
    </hqsPopup>
    <!-- 商场详情 -->
    <hqsPopup
      v-model="showMarket"
      :height="'80vh'"
      :round="20"
      :showClose="false"
      :showHeader="false"
      @onChange="handleAllPop"
    >
      <MarketDetail :round="20" :overview="marketData"></MarketDetail>
    </hqsPopup>
  </view>
</template>

<script>
import hqsPopup from "../hqs-popup/hqs-popup.vue";
// import hotelInfo from "../hotelInfo/hotelInfo.vue";
import RestaurantDetails from "../restaurantDetails/restaurantDetails.vue";
import MarketDetail from "../restaurantDetails/marketDetail.vue";
export default {
  components: {
    hqsPopup,
    // hotelInfo,
    RestaurantDetails,
    MarketDetail,
  },
  props: {
    detailData: {
      type: Object,
      default: {},
    },
    hiddenLine: {
      type: Boolean,
      default: true,
    },
  },
  watch: {},
  computed: {},
  data() {
    return {
      tabIndex: 0,
      aboutList: [],
      isDragging: false,
      offsetX: 0,
      offsetY: 0,
      startX: 0,
      startY: 0,
      showRestauran: false,
      showMarket: false,
      restauranData: {},
      marketData: {},
    };
  },
  methods: {
    onLongPress(event) {
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
      this.isDragging = true;
      console.log("this.startY", this.startY);
    },
    onTouchMove(event) {
      if (this.isDragging) {
        this.offsetX = event.touches[0].clientX - this.startX;
        this.offsetY = event.touches[0].clientY - this.startY;
        console.log("this.offsetX", this.offsetX);
      }
    },
    onTouchEnd() {
      this.isDragging = false;
      console.log("this.offsetY", this.offsetY);
      if (this.offsetY > 100) {
        this.$emit("closePop");
      }
    },
    //跳转详情
    openDetail() {
      if (this.detailData.sourceCode != 0) {
        uni.navigateTo({
          url: '/ai/pages/notedetails/notedetails?articleId=' + this.detailData.articleId
        })
      } else {
        uni.navigateTo({
          url: '/ai/pages/notedetails/notedetails?articleId=' + this.detailData.articleId
        })
      }
    },
    //获取文中提及
    async getAbout(poiList) {
      // if(this.aboutList.length >0 ) return;
      let params = {
        poiIdList: poiList,
      };
      let res = await this.$aiRequest({
        url: "/ai/aihub/article/relPoi",
        method: "POST",
        params,
      });
      if (res.success) {
        this.setData(res.data);
      }
    },
    setData(data) {
      let arr = [];
      if (data.hotelList.length > 0) {
        arr.push({
          title: "酒店",
          list: data.hotelList,
          type: 1,
        });
      }
      if (data.restaurantList.length > 0) {
        arr.push({
          title: "美食",
          list: data.restaurantList,
          type: 2,
        });
      }
      if (data.scenicList.length > 0) {
        arr.push({
          title: "景点",
          list: data.scenicList,
          type: 3,
        });
      }
      if (data.shoppingList.length > 0) {
        arr.push({
          title: "购物",
          list: data.shoppingList,
          type: 4,
        });
      }
      this.tabIndex = 0;
      this.aboutList = arr;
      this.$forceUpdate();
    },
    tabClick(index) {
      this.tabIndex = index;
    },
    gotoHotelDetails(item) {
      this.detailPrams = this.getParams(item);
      // this.$refs.hotelDetails.getHotelDetail(this.detailPrams);
      let url = '/packageAI/pages/aiHotelInfo/aiHotelInfo'
      console.log('data', url);
      this.$navTo(url, 
        // rpId: this.detailPrams.rpId
        this.detailPrams
      , 'navigateTo')
    },
    open() {
      this.$refs.hotelPopup.open();
      this.setDataCallback(1, false);
      this.$store.commit("SET_StrategyList_Strbottom", false);
    },
    popupClose() {
      this.$refs.hotelPopup.close();
      this.setDataCallback(1, true);
    },
    getParams(item) {
      const {
        checkin: checkinTime,
        checkout: checkoutTime,
        supplierProductId: productId,
        rpId,
        productId: stdId,
        storeId,
      } = item;
      return { checkinTime, checkoutTime, productId, rpId, stdId, storeId };
    },
    setDataCallback(type, code) {
      this.$emit("setDataCallback", { type, code });
    },
    // 监听详情弹窗
    handleAllPop(code) {
      this.setDataCallback(1, !code);
    },
    //获取餐厅详情
    async getRestaurantDetail(item) {
      let res = await this.$aiRequest({
        url: `/ai/aihub/chat/queryRestaurantDetail/${item.poiId}`,
        method: "GET",
      });
      if (res.success) {
        console.log("this", this.showRestauran);
        this.showRestauran = true;
        this.restauranData = res.data;
        this.$refs.restaurantDetails.getRecList(res.data);
      } else {
        uni.showToast({
          title: res.errMsg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    //获取商场详情
    async getMarketDetail(item) {
      let res = await this.$aiRequest({
        url: `/ai/aihub/chat/queryMarketDetail/${item.poiId}`,
        method: "GET",
      });
      if (res.success) {
        this.showMarket = true;
        this.marketData = res.data;
      } else {
        uni.showToast({
          title: res.errMsg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    poiDetail(item) {
      uni.navigateTo({
        url: '/ai/pages/POIDetail/index?poiId=' + item.poiId
      })
    },
    isInteger(number) {
      return Number.isInteger(number);
    },
  },
};
</script>

<style lang="scss" scoped>
.strategy-box {
  position: relative;
  padding-bottom: 220rpx;
  // overflow: auto;
  border-radius: 49rpx 49rpx 0 0;
  background: #ffffff;
  // height: 100%;
  .top-line {
    width: 46rpx;
    height: 7rpx;
    background: #eaeaea;
    border-radius: 4rpx;
    position: absolute;
    left: 50%;
    margin-left: -23rpx;
    top: 20rpx;
  }
  .strategy-img {
    width: 100%;
    height: 500rpx;
    border-radius: 24px 24px 0 0;
  }
  .source-img {
    position: absolute;
    top: 40rpx;
    right: 30rpx;
  }
  .str-title {
    color: $sl-color-black;
    font-size: 36rpx;
    font-weight: 600;
    padding: 40rpx 40rpx 30rpx 40rpx;

    background: #ffffff;
    border-radius: 24px 24px 0 0;
  }
  .str-title.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .str-tag-box {
    padding: 0 40rpx 20rpx 40rpx;
    display: flex;
    flex-wrap: wrap;
    .tag-box-item {
      height: 50rpx;
      padding: 0 20rpx;
      background: #ecf0ff;
      display: flex;
      align-items: center;
      margin-right: 20rpx;
      margin-bottom: 10rpx;
      border-radius: 10rpx;
      .tag-txt {
        color: #7696ff;
        font-size: 24rpx;
      }
      .tag-icon {
        width: 28rpx;
        height: 34rpx;
        margin-right: 8rpx;
      }
    }
    .tag-box-item-2 {
      height: 66rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 30rpx;
      color: $sl-color-dark-grey;
      font-size: 28rpx;
      background: rgba(27, 156, 97, 0.20);
      margin: 0 30rpx 10rpx 0;
      border-radius: 10rpx;
    }
    .tag-box-item-2.active {
      background: rgba(27, 156, 97, 1);
      color: #ffffff;
    }
  }
  .str-tag-box.active {
    margin-bottom: 20rpx;
  }
  .str-title-2 {
    color: $sl-color-dark-grey;
    font-size: 28rpx;
    font-weight: 600;
    padding: 30rpx 40rpx 40rpx 40rpx;
  }
  .str-summarize {
    width: 710rpx;
    background: rgba(238, 240, 223, 1);
    border-radius: 26rpx;
    margin: 0 auto;
    .str-title-icon {
      width: 153rpx;
      height: 52rpx;
      margin: 20rpx 0 0 20rpx;
    }
    .summarize-box {
      padding: 18rpx 20rpx 10rpx 20rpx;
      .summarize-txt {
        color: $sl-color-black;
        font-size: 28rpx;
        padding-bottom: 16rpx;
      }
    }
  }
  .summarize-list-box {
    width: 710rpx;
    padding: 30rpx 0;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(53, 73, 107, 0.05);
    border-radius: 30rpx;
    margin: 0 auto 20rpx auto;
    .box-info {
      width: 670rpx;
      margin: 0 auto;
      display: flex;
      .info-img {
        width: 154rpx;
        height: 260rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }
      .info-content {
        flex: 1;
        .content-flex {
          display: flex;
          color: $sl-color-grey;
          font-size: 24rpx;
          margin-bottom: 10rpx;
          .content-tag {
            padding: 0 14rpx;
            height: 30rpx;
            line-height: 30rpx;
            border-radius: 4rpx;
            border: 1rpx solid rgba(170, 84, 19, 0.40);
            display: flex;
            align-items: center;
            color: rgba(170, 84, 19, 1);
            font-size: 20rpx;
            margin: 0 10rpx 10rpx 0;
          }
          .icon {
            width: 25rpx;
            height: 25rpx;
            margin-right: 10rpx;
          }
          .content-txt-1 {
            font-size: 20rpx;
            color: #ff4f01;
            padding-left: 30rpx;
          }
          .content-txt-2 {
            color: #ff4f01;
            font-size: 32rpx;
          }
          .content-txt-3 {
            color: #999999;
            font-size: 16rpx;
          }
        }
        // .content-flex.active {
        //   align-items: center;
        // }
        .content-title {
          color: $sl-color-black;
          font-size: 32rpx;
          font-weight: 600;
          margin-bottom: 10rpx;
        }
      }
    }
    .introduce {
      width: 670rpx;
      background: rgba(238, 240, 223, 1);
      border-radius: 10rpx;
      margin: 20rpx auto 0 auto;
      font-size: 24rpx;
      color: $sl-color-black;
      display: flex;
      align-items: center;
      padding: 10rpx;
    }
  }
}
.str-bottom {
  width: 670rpx;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(0, 0, 0, 0.12),
    0rpx 10rpx 30rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 100rpx;
  backdrop-filter: blur(6px);
  position: fixed;
  bottom: 70rpx;
  left: 50%;
  margin-left: -335rpx;
  display: flex;
  justify-content: space-evenly;
  .bottom-box {
    display: flex;
    align-items: center;
    color: $sl-color-black;
    font-size: 24rpx;
    .icon-1 {
      width: 62rpx;
      height: 57rpx;
      margin-right: 12rpx;
    }
    .icon-2 {
      width: 56rpx;
      height: 56rpx;
      margin-right: 12rpx;
    }
    .icon-3 {
      width: 62rpx;
      height: 60rpx;
      margin-right: 12rpx;
    }
  }
}
.detail-txt {
  color: $sl-color-black;
  font-size: 28rpx;
  width: 670rpx;
  margin: 0 auto 30rpx auto;
}
.no-about {
  width: 710rpx;
  height: 393rpx;
  background: linear-gradient(
    135deg,
    rgba(234, 241, 255, 0.52) 0%,
    rgba(224, 250, 255, 0.62) 100%
  );
  border-radius: 30rpx;
  margin: 0 auto;
  color: #4d6181;
  font-size: 32rpx;
  text-align: center;
  line-height: 393rpx;
}
.content-view {
  display: flex;
  flex-direction: row;
  padding: 0 19rpx 0 30rpx;
  margin-bottom: 30rpx;
}

.content-view-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 24rpx;
  flex: 1;
}

.product-image {
  position: relative;
  width: 230rpx;
  height: 230rpx;
  border-radius: 20rpx;
}

.content-right-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #0d1016;
  line-height: 36rpx;
}

.content-view-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 19rpx;
}

.content-money-view {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.money-tag {
  font-size: 22rpx;
  font-weight: 400;
  color: #fe350d;
}

.money-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #fe350d;
  margin: 0 4rpx 0 10rpx;
}

.gray-money-text {
  font-size: 22rpx;
  font-weight: 400;
  color: #b3b3b3;
}

.gray-money-text text {
  text-decoration: line-through;
}

.sales-text {
  font-size: 20rpx;
  font-weight: 400;
  color: #999999;
}
.introduction {
  color: $sl-color-grey;
  font-size: 24rpx;
}
.summarize-list-box {
  width: 710rpx;
  padding: 30rpx 0;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(53, 73, 107, 0.05);
  border-radius: 30rpx;
  margin: 0 auto 20rpx auto;
  .box-info {
    width: 670rpx;
    margin: 0 auto;
    display: flex;
    position: relative;
    .top-icon {
      width: 90rpx;
      height: 34rpx;
      position: absolute;
      top: 0;
      left: 0;
    }
    .info-img {
      width: 154rpx;
      height: 260rpx;
      margin-right: 20rpx;
      border-radius: 5rpx;
    }
    .info-content {
      flex: 1;
      .content-flex {
        display: flex;
        color: $sl-color-grey;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        .content-tag {
          padding: 0 14rpx;
          height: 30rpx;
          line-height: 30rpx;
          border-radius: 5rpx;
          border: 1rpx solid rgba(170, 84, 19, 0.40);
          display: flex;
          align-items: center;
          color: rgba(170, 84, 19, 1);
          font-size: 20rpx;
          margin: 0 10rpx 10rpx 0;
        }
        .icon {
          width: 25rpx;
          height: 25rpx;
          margin-right: 10rpx;
        }
        .content-txt-1 {
          font-size: 20rpx;
          color: #ff4f01;
          padding-left: 30rpx;
        }
        .content-txt-2 {
          color: #ff4f01;
          font-size: 32rpx;
        }
        .content-txt-3 {
          color: #999999;
          font-size: 16rpx;
        }
      }
      // .content-flex.active {
      //   align-items: center;
      // }
      .content-title {
        color: $sl-color-black;
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
      }
    }
  }
  .introduce {
    width: 670rpx;
    background: rgba(238, 240, 223, 1);
    border-radius: 10rpx;
    margin: 20rpx auto 0 auto;
    font-size: 24rpx;
    color: $sl-color-black;
    display: flex;
    align-items: center;
    padding: 10rpx;
  }
}
.star-icon {
  width: 26rpx;
  height: 26rpx;
}
.left-item {
  display: flex;
  flex-wrap: wrap;
  padding-top: 35rpx;
  .mark-box {
    display: flex;
  }
  .evaluate {
    color: $sl-color-grey;
    font-size: 24rpx;
    padding-left: 40rpx;
  }
}
.like {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: $sl-color-dark-orage;
  line-height: 33rpx;
}
</style>
